<template>
	<view class="box">
		<SearchBox></SearchBox>
		<view class="banner_box" style="margin-top: 20rpx;">
			<swiper :autoplay="true" :interval="3000" :duration="1000" @change="swiperChange" style="height: 250rpx;">
				<swiper-item v-for="(i,n) in bannerList" @click="handleToDetail(i.video_id)">
					<view style="position: relative">
						<image :src="i.cover" mode="aspectFill"></image>
						<view class="title_box">
							<view class="title one-text-ellipsis">{{i.title}}</view>
							<view class="dot_box">
								<view v-for="(item,index) in bannerList.length" class="item"
									:style="swiperIndex===index?dotStyle:''"></view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<Title>专属推荐</Title>
		<view class="id_box">
			<view class="item_box" v-for="i in data0" @click="handleToDetail(i.id)">
				<view class="image_box">
					<image :src="i.cover" mode="aspectFill"></image>
					<view class="icon_box">
						<text class="iconfont iconbofangshu"></text>
						<text>{{i.play_count}}</text>
						<text class="iconfont icondanmushu"></text>
						<text>{{i.danmu_count}}</text>
					</view>
				</view>
				<view class="info_box">
					<view class="title one-text-ellipsis">{{i.title}}</view>
					<view class="category_box">
						<view class="category">{{i.category.title}}</view>
						<view class="iconfont icongengduo right"></view>
					</view>
				</view>
			</view>
			<view class="switch_box">
				<text class="iconfont iconshuaxin"></text>
				<text @click="handleSwitch(0)">换一批</text>
			</view>
		</view>
		<view class="separation-line"></view>
		<Title>热门视频</Title>
		<view class="id_box" >
			<view class="item_box" v-for="i in data1" style="border: none;margin-bottom: 0;" 
				@click="handleToDetail(i.id)">
				<view class="image_box">
					<image :src="i.cover" mode="aspectFill" class="small_img"></image>
					<view class="icon_box" style="border-radius: 0 0 14rpx 14rpx;">
						<text class="iconfont iconbofangshu"></text>
						<text>{{i.play_count}}</text>
					</view>
				</view>
				<view class="title one-text-ellipsis">{{i.title}}</view>
			</view>
			<view class="switch_box">
				<text class="iconfont iconshuaxin"></text>
				<text  @click="handleSwitch(1)">换一批</text>
			</view>
		</view>
		<view class="separation-line"></view>
		<Title>全站排名</Title>
		<view class="" style="margin: 0 -20rpx;">
			<VideoList v-for="item in data2" :item="item"></VideoList>
		</view>
		<view class="text" v-if="data2.length===0" style="margin-top: 100rpx;font-size: 34rpx;">暂无数据</view>
		<view v-if="data2.length > 10" class="text" style="margin-top: 10rpx;text-align: center;color: #6c757d;" 
			hover-class="bg-light">
			{{ loadText }}
		</view>
		
	</view>
	
</template>

<script>
	import VideoList from '@/components/common/video-list.vue'
	import SearchBox from '@/components/common/search-box.vue'
	import Title from '@/components/common/title.vue'
	export default {
		components: {
			SearchBox,
			Title,
			VideoList
		},
		data() {
			return {
				bannerList: [],
				dotStyle: {
					backgroundColor: '#fff'
				},
				swiperIndex: 0,
				data0: [],
				data1: [],
				data2: [],
				loadText: "上拉加载更多",
				page:[1,1,1]
			}

		},
		methods: {
			async handleSwitch(type){
				uni.showLoading({
					title:'加载中~~'
				})
				let count=await this.$H.get('/video_count')
				count=parseInt(count/6)
				if(this.page[type]==count){
					this.page[type]=1
				}else{
					this.page[type]=this.page[type]+1;
				}
				console.log(this.page[type])
				this.getData(type)
					
				setTimeout(()=>{
					uni.hideLoading()
				},500)
				
			},
			judge(res) {
				if (this.page[2] === 1) {
					this.data2 = res
				} else {
					this.data2 = [...this.data2, ...res]
				}
				this.loadText = res.length === 6 ? '上拉加载更多' : '没有更多了'
			},
			handleToDetail(id){
				uni.navigateTo({
					url:`/pages/detail_video/detail_video?id=${id}`
				})
			},
			swiperChange(e) {
				this.swiperIndex = e.detail.current;
				// console.log(this.swiperIndex)
			},
			getBanner() {
				this.$H.get('/banner').then(res => {
					// console.log(res)
					this.bannerList = res
				})
			},
			async getData(type = 0) {
				let res = await this.$H.get(`/index_data/${this.page[type]}/?limit=6&type=${type}`)
				if(type===2){
					console.log(res)
					this.judge(res)
				}else{
					this['data' + type] = res
				}
				
			}
		},
		onLoad() {
			this.getBanner()
			this.getData(0)
			this.getData(1)
			this.getData(2)
			// console.log(this.getData(1))
		},
		onReachBottom() {
			console.log(1)
			if (this.loadText === '没有更多了') {
				return
			}
			if (this.loadText === '正在加载中...') {
				return
			}
			this.loadText = '正在加载中...'
			
			this.page[2] = this.page[2] + 1
			console.log(this.page[2])
			this.getData(2)
		}

	}
</script>

<style lang="scss" scoped>
	.switch_box{
		color: #FB7299;
		width: 100%;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.banner_box {
		image {
			width: 100%;
			height: 250rpx;
			border-radius: 20rpx;
			vertical-align: bottom;
		}

		.title_box {
			background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
			height: 70rpx;
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 0 20rpx;
			border-radius: 0 0 20rpx 20rpx;

			.title {
				flex: 1;
				color: #fff;

			}

			.dot_box {
				display: flex;

				.item {
					margin-right: 10rpx;
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: rgba(255, 255, 255, 0.5);
				}

				.item:nth-last-child(1) {
					margin-right: 0;
				}

			}
		}
	}

	.id_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item_box {
			border: 2rpx solid rgb(222, 226, 230);
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			.image_box {
				
				position: relative;

				image {
					width: 330rpx;
					height: 220rpx;
					vertical-align: top;
	
				}
				.small_img{
					width: 210rpx;
					height: 280rpx;
					vertical-align: top;
					border-radius: 14rpx;
				}
				

				.icon_box {
					// padding: 0 20rpx;
					
					color: #fff;
					height: 60rpx;
					position: absolute;
					bottom: 0;
					right: 0;
					left: 0;
					background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
					text{
						margin-left: 10rpx;
					}
				}
			}
			.title{
				width: 210rpx;
				padding: 16rpx 0;
			}
			.info_box{
				box-sizing: border-box;
				width: 330rpx;
				padding: 0 10rpx;
				.title{
					margin-top: 10rpx;
					height: 50rpx;
					line-height: 50rpx;
				}
				.category_box{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 50rpx;
					color: #A9A5A0;
					.category{
						
					}
					.right{
						
					}
				}
			}
		}
	}
</style>
